<!--
  Used to render a document in a compact inline format eg. for use in dropdown menus

  <Doc::Inline /> requires 2 properties, with 2 optional properties:
  @avatar (string): link to avatar image
  @docID (string): document ID
  @docNumber (string): document number
  @productArea eg. 'Waypoint' or 'Design Systems' etc
  @status eg. 'approved', 'review', 'obsolete'
  @isResult eg. 'true' (false by default) - optional
  @isOwner eg. 'true' (false by default) - optional
  @snippet: HTML string - optional
-->

<LinkTo
  @route="authenticated.document"
  @model="{{@docID}}"
  class="flex items-center space-x-3 no-underline py-2 px-3 hover:bg-[color:var(--token-color-palette-neutral-100)]"
>
  <div
    class="relative flex flex-shrink-0 items-center w-[40px] h-[56px] hds-surface-mid
      {{if
        (eq @status 'obsolete')
        'hds-surface-faint opacity-75'
        'hds-surface-primary'
      }}
      rounded overflow-hidden"
  >
    <img src="/images/document.png" class="w-full mix-blend-multiply" />
    {{#if (eq @status "approved")}}
      <FlightIcon
        @name="check-circle"
        @size="24"
        class="absolute -right-2 top-1 fill-[var(--token-color-palette-green-200)] w-8 h-8 -rotate-12 mix-blend-multiply opacity-75"
      />
    {{/if}}
    {{#if (eq @status "obsolete")}}
      <div
        class="absolute top-0 left-0 right-1 bottom-0 flex items-center hds-surface-strong hds-surface-mid rounded overflow-hidden"
      >
        <FlightIcon
          @name="archive"
          @size="24"
          class="absolute -left-2 top-1 fill-[var(--token-color-palette-neutral-200)] w-8 h-8 -rotate-12 mix-blend-multiply opacity-75"
        />
      </div>
    {{/if}}
    <div class="{{if (eq @status 'obsolete') 'opacity-50'}}">
      <Doc::Tag @name={{@productArea}} @isSmall="{true}" />
    </div>
  </div>

  <div class="flex flex-col space-y-1 overflow-hidden">
    <h4
      class="hds-typography-body-200 hds-font-weight-semibold hds-foreground-strong"
    >{{@title}}</h4>
    {{#if (not (is-empty @docNumber))}}
      <small
        class="hds-typography-body-100 hds-foreground-faint"
      >{{@docNumber}}</small>
    {{/if}}

    <Person
      @ignoreUnknown={{true}}
      @imgURL={{@avatar}}
      @email={{@owner}}
    />

    {{#if @isResult}}
      {{#if @snippet}}
        <p
          class="hds-typography-body-100 hds-foreground-faint truncate"
        >{{{@snippet}}}</p>
      {{/if}}
    {{/if}}
  </div>
</LinkTo>
